<template>
	<div class="tableMain">
		<!-- 正常显示 -->
		<div :class="{ exportCustomStyle: loadingBox }" v-show="!loadingBox">
			<table v-for="(table, tableIndex) in tableArr" :key="tableIndex" v-show="!loadingBox" :style="'width: 950px'">
				<thead>
					<tr>
						<td rowspan="2">
							<span v-if="projectTypeId != 2">{{ table[0][0].site | teams }}</span>
						</td>
						<td rowspan="2" v-for="(playerRow, RowIndex) in table[0]" :key="RowIndex">
							{{ playerRow.site }}
							<div style="display: flex;justify-content: space-around; align-items: baseline;margin: 0 10%;font-size: 10px;">
								<div v-for="(limit, index) in playerRow.user_limit" :key="`${index}a`" v-if="index < 3" style="overflow: hidden">{{ limit }}</div>
							</div>
						</td>
						<td rowspan="2" v-if="!is_have_score">胜次(Wins)</td>
						<td rowspan="2" v-if="is_have_score">积分/胜次</td>
						<td colspan="3">胜率(Wins%)</td>
						<td rowspan="2">名次(Rank)</td>
					</tr>
					<tr>
						<td>盘(sets)</td>
						<td>局(games)</td>
						<td>分(points)</td>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(playerColumn, playerIndex1) in table[0]" :key="playerColumn.id" :class="playerIndex1 % 2 != 0 ? 'tableShadow' : ''">
						<td>
							{{ playerColumn.site }}
							<span v-if="playerColumn.team_name">{{ playerColumn.team_name }}</span>
							<span v-else>{{ playerColumn.user_name }}</span>
							<span v-if="playerColumn.seed_num" style="color: red;">({{ playerColumn.seed_num }})</span>
							<div style="display: flex;justify-content: space-around; align-items: baseline;margin: 0 10%;font-size: 10px;">
								{{ playerColumn.one_limit }}{{ playerColumn.two_limit }}{{ playerColumn.three_limit }}
							</div>
						</td>
						<td v-for="(player2, playerIndex2) in table_element[tableIndex][playerIndex1]" :key="`${playerIndex2}b`">
							<!--<div v-if="playerIndex1==playerIndex2" class="biaotou">-->
							<!--斜线可用svg也可以用background 只是html2canvas不支持calc属性-->
							<!-- 						<div v-if="playerIndex1 == playerIndex2" class="box-c">
							<svg width="200px" height="200px" version="1.1" class="diagnal-line">
								<line x1="0" y1="0" x2="100%" y2="100%" style="stroke: #dbdbdb;stroke-width:1" />
							</svg>
              </div>-->
							<div
								v-for="(gameScore, gameScore_index) in player2.score"
								:key="`${gameScore_index}c`"
								playerIndex2
								v-if="gameScore.top || gameScore.bot"
								:class="player2.winColor ? 'red' : ''"
							>
								{{ gameScore.top }}:{{ gameScore.bot }}
								<span style="margin-left: 2px;" v-if="player2.waiver_user !== 0 && !player2.winColor && gameScore_index == 0">弃</span>
							</div>
							<div
								:class="{
									team_scoreFiveClass: player2.team_score_a.length > 1,
									team_scoreOneClass: player2.team_score_a.length == 1
								}"
								v-if="player2.team_score_a && playerColumn.sign_id == player2.sign_id_a"
							>
								<div v-for="(team_score, team_index) in player2.team_score_a" :key="team_index + 10">
									<div v-for="(item, index) in team_score" :key="`${index}c`" class="team_score" :class="item.top > item.bot ? 'red' : ''">
										{{ item.top }}:{{ item.bot }}
										<span v-if="item.tiebreak">({{ item.tiebreak }})</span>
									</div>
								</div>
							</div>
							<div
								:class="{
									team_scoreFiveClass: player2.team_score_b.length > 1,
									team_scoreOneClass: player2.team_score_b.length == 1
								}"
								v-if="player2.team_score_b && playerColumn.sign_id == player2.sign_id_b"
							>
								<div v-for="(team_score1, indexs) in player2.team_score_b" :key="indexs + 100">
									<div v-for="(item1, index) in team_score1" :key="`${index}c`" class="team_score" :class="item1.top > item1.bot ? 'red' : ''">
										{{ item1.top }}:{{ item1.bot }}
										<span v-if="item1.tiebreak">({{ item1.tiebreak }})</span>
									</div>
								</div>
							</div>
						</td>
						<td v-if="!is_have_score">{{ playerColumn.win_time | winTime(playerColumn.rank_one) }}</td>
						<td v-if="is_have_score">
							{{ playerColumn.first_score }}
							<span v-if="playerColumn.first_score || playerColumn.win_time">/</span>
							<span v-if="playerColumn.first_score || playerColumn.win_time">{{ playerColumn.first_score && playerColumn.win_time != null ? playerColumn.win_time : 0 }}</span>
						</td>
						<td>{{ playerColumn.plate_rate | plateRate }}</td>
						<td>{{ playerColumn.round_rate | roundsRate }}</td>
						<td>{{ playerColumn.score_rate | scoreRate }}</td>
						<td>{{ playerColumn.rank_one | rankOne }}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<!-- pdf显示 -->
		<div
			class="exportCustomStyle"
			v-if="loadingBox"
			v-for="(item, pageIndex) in pdfs"
			:key="pageIndex"
			:id="'pdfDom' + pageIndex"
			style="min-height: 1900px;padding-top: 20px;position: relative;">
			<layoutTableHeader
				:match_name="MatchInfoLayout.com_name"
				:match_time="MatchInfoLayout.com_time"
				:match_location="MatchInfoLayout.address"
				:referee_name="MatchInfoLayout.referee_name"
				:project_name="project_name"
				id="pdfDomHeaders"
				:logo_url="MatchInfoLayout.logo"
			/>
			<div :class="{
					spacingTow: groupNumber(pageIndex) == 2,
					spacingThree: groupNumber(pageIndex) == 3,
					spacingFour: groupNumber(pageIndex) == 4,
					spacingFive: groupNumber(pageIndex) == 5,
					spacingSix: groupNumber(pageIndex) == 6,
					spacingen: groupNumber(pageIndex) == 8
				}">
				<table
					v-for="(table, tableIndex) in LayoutLoopResult.slice(pageIndex * sliceLength, (pageIndex + 1) * sliceLength)"
					:key="tableIndex"
					style="width: 950px;">
					<thead>
						<!-- <span style="position: fixed;top: 0;left: 40%;color: #f0f;font-weight: 700;font-size: 36px;">{{ groupNumber(pageIndex)}}</span> -->
						<tr>
							<td rowspan="2">{{ table[0][0].site | teams }}</td>
							<td rowspan="2" v-for="(playerRow, RowIndex) in table[0]" :key="RowIndex">
								{{ playerRow.site }}
								<div style="display: flex;justify-content: space-around; align-items: baseline;margin: 0 10%;font-size: 10px;">
									<div v-for="(limit, index) in playerRow.user_limit" :key="`${index}`" v-if="index < 3" style="overflow: hidden">{{ limit }}</div>
								</div>
							</td>
							<td rowspan="2" v-if="!is_have_score">胜次(Wins)</td>
							<td rowspan="2" v-if="is_have_score">积分/胜次</td>
							<td colspan="3">胜率(Wins%)</td>
							<td rowspan="2">名次(Rank)</td>
						</tr>
						<tr>
							<td>盘(sets)</td>
							<td>局(games)</td>
							<td>分(points)</td>
						</tr>
					</thead>
					<tbody>
						<tr v-for="(playerColumn, playerIndex1) in table[0]" :key="playerColumn.id" :class="playerIndex1 % 2 != 0 ? 'tableShadow' : ''">
							<td>
								{{ playerColumn.site }}
								<span v-if="playerColumn.team_name">{{ playerColumn.team_name }}</span>
								<span v-else>{{ playerColumn.user_name }}</span>
								<span v-if="playerColumn.seed_num" style="color: red;">({{ playerColumn.seed_num }})</span>
								<div style="display: flex;justify-content: space-around; align-items: baseline;margin: 0 10%;font-size: 10px;">
									{{ playerColumn.one_limit }}{{ playerColumn.two_limit }}{{ playerColumn.three_limit }}
								</div>
							</td>
							<td v-for="(player2, playerIndex2) in table_elements(pageIndex)[tableIndex][playerIndex1]" :key="`${playerIndex2}`">
								<!--<div v-if="playerIndex1==playerIndex2" class="biaotou">-->
								<!--斜线可用svg也可以用background 只是html2canvas不支持calc属性-->
								<div v-for="(gameScore, index) in player2.score" :key="`${index}`" v-if="gameScore.top || gameScore.bot" :class="player2.winColor ? 'red' : ''">
									{{ gameScore.top }}:{{ gameScore.bot }}
									<span style="margin-left: 2px;" v-if="player2.waiver_user !== 0 && !player2.winColor">弃</span>
								</div>
								<div
									:class="{
										team_scoreFiveClass: player2.team_score_a.length > 1,
										team_scoreOneClass: player2.team_score_a.length == 1
									}"
									v-if="player2.team_score_a && playerColumn.sign_id == player2.sign_id_a"
								>
									<div v-for="(team_score, team_score_index) in player2.team_score_a" :key="`${team_score_index}`">
										<div v-for="(item, index) in team_score" :key="`${index}`" class="team_score" :class="item.top > item.bot ? 'red' : ''">
											{{ item.top }}:{{ item.bot }}
											<span v-if="item.tiebreak">({{ item.tiebreak }})</span>
										</div>
									</div>
								</div>
								<div
									:class="{
										team_scoreFiveClass: player2.team_score_b.length > 1,
										team_scoreOneClass: player2.team_score_b.length == 1
									}"
									v-if="player2.team_score_b && playerColumn.sign_id == player2.sign_id_b"
								>
									<div v-for="(team_score1, team_score_index1) in player2.team_score_b" :key="`${team_score_index1}`">
										<div v-for="(item1, index) in team_score1" :key="`${index}`" :class="item1.top > item1.bot ? 'red' : ''">{{ item1.top }}:{{ item1.bot }}</div>
									</div>
								</div>
							</td>
							<td v-if="!is_have_score">{{ playerColumn.win_time | winTime(playerColumn.rank_one) }}</td>
							<td v-if="is_have_score">{{ playerColumn.first_score }}/{{ playerColumn.win_time }}</td>
							<td>{{ playerColumn.plate_rate | plateRate }}</td>
							<td>{{ playerColumn.round_rate | roundsRate }}</td>
							<td>{{ playerColumn.score_rate | scoreRate }}</td>
							<td>{{ playerColumn.rank_one | rankOne }}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- <div v-if="groupNumber(pageIndex) == 3" style="display: flex;justify-content: center;width: 70%;margin: 0 auto;height: 200px;"> -->
			<div  style="display: flex;justify-content: center;width: 70%;margin: 0 auto;height: 200px;">
				<div v-if="gridtable.length <= 4" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 80%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>

					<table class="gridtable" style="width: 20%;height: 100%">
						<tr><th style="height: 10px;line-height: 10px;">抽签时间</th></tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;">{{ drawTimes }}</td>
						</tr>
						<tr><th>抽签代表</th></tr>
						<tr><td></td></tr>
						<tr><th>裁判长签名</th></tr>
						<tr>
							<td>{{ name }}</td>
						</tr>
					</table>
				</div>
				<!-- 种子位置PDF导出 -->
				<div v-if="gridtable.length > 4 && pdfs >= 1 && pageIndex <= gridtablepage" style="display: flex;justify-content: space-between;width: 100%;">
					<table class="gridtable" style="width: 40%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<!-- {{gridtable.slice(2 * pageIndex * 4, (2 * pageIndex + 1) * 4)}} -->
						<tr v-for="(item, index) in gridtable.slice(2 * pageIndex * 4, (2 * pageIndex + 1) * 4)" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>

					<table class="gridtable" style="width: 40%;height: 100%">
						<tr>
							<th>种子号</th>
							<th>姓名</th>
							<th>签位</th>
							<th>单位</th>
						</tr>
						<tr v-for="(item, index) in gridtable.slice((2 * pageIndex + 1) * 4, (2 * pageIndex + 2) * 4)" :key="index">
							<td>{{ item.seed_site }}</td>
							<td>{{ item.name }}</td>
							<td>{{ item.sign }}</td>
							<td>{{ item.company }}</td>
						</tr>
					</table>

					<table class="gridtable" style="width: 20%;height: 100%">
						<tr><th style="height: 10px;line-height: 10px;">抽签时间</th></tr>
						<tr>
							<td style="height: 12px;line-height: 12px;text-align: center;">{{ drawTimes }}</td>
						</tr>
						<tr><th>抽签代表</th></tr>
						<tr><td></td></tr>
						<tr><th>裁判长签名</th></tr>
						<tr>
							<td>{{ name }}</td>
						</tr>
					</table>
				</div>
			</div>
			<!-- 添加水印 -->
			<div style="position: absolute;top: 50%;left:50%;transform:translate(-50%,-50%);">
				<img style="opacity: 0.2;" width="100%" src="http://qncdn.tissys.com/admin/assetsassets/bg.png" alt />
			</div>
		</div>
	</div>
</template>
<script>
import { mapState } from 'vuex';
import layoutTableHeader from './layoutTableHeader';
export default {
	data() {
		return {
			rankList: [],
			hasDiy: false,
			loopResult: this.LayoutLoopResult,
			winner_in_top: null
		};
	},
	created() {
	},
	props: {
		LayoutLoopResult: Array,
		loadingBox: Boolean,
		project_name: String,
		seed_site: String,
		drawTime: Number,
		name: String,
		is_have_score: Boolean,
		projectTypeId: ''
	},
	components: {
		layoutTableHeader
	},
	filters: {
		teams(val) {
			return `${val.slice(0, -1)}组`;
		},
		rankOne(val) {
			if (val === null) return '';
			if (!isNaN(Number(val))) return val;
			return val.substring(1, val.length);
		},
		winTime(val, win_time_val) {
			if (val === null && win_time_val !== null) {
				return 0;
			} else {
				return val;
			}
		},
		plateRate(val) {
			if (val == 0.0) return '';
			return val;
		},
		roundsRate(val) {
			if (val == 0.0) return '';
			return val;
		},
		scoreRate(val) {
			if (val == 0.0) return '0.00';
			return val;
		}
	},
	computed: {
		...mapState({
			MatchInfoLayout: 'MatchInfoLayout'
		}),
		tableArr() {
			let arr = {};
			for (let i in this.LayoutLoopResult) {
				if (typeof this.LayoutLoopResult[i] == 'object') {
					arr[i + '组'] = this.LayoutLoopResult[i];
				}
			}
			return arr;
		},
		table_element() {
			let arr = JSON.parse(JSON.stringify(this.tableArr));
			let element = this.calc_table_element(arr);
			return element;
		},
		table_elements() {
			return function(pageIndex) {
				let arr = JSON.parse(JSON.stringify(this.LayoutLoopResult.slice(pageIndex * this.sliceLength, (pageIndex + 1) * this.sliceLength)));
				let element = this.calc_table_element(arr);
				return element;
			};
		},
		pdfs() {
			let arr = [];
			for (let i = 0; i < this.LayoutLoopResult.length; i++) {
				arr.push(this.LayoutLoopResult[i][0].length);
			}
			let rounding = Math.round(this.sumArr(arr) / this.LayoutLoopResult.length);
			let merchant = null;
			if (this.LayoutLoopResult.length <= 4 && rounding < 5) {
				merchant = 1;
			} else if (this.LayoutLoopResult.length > 4 && rounding < 5) {
				merchant = this.LayoutLoopResult.length % 4 == 0 ? this.LayoutLoopResult.length / 4 : parseInt(this.LayoutLoopResult.length / 4) + 1;
			} else if (this.LayoutLoopResult.length > 4 && rounding >= 5 && rounding < 8) {
				merchant = this.LayoutLoopResult.length % 3 == 0 ? this.LayoutLoopResult.length / 3 : parseInt(this.LayoutLoopResult.length / 3) + 1;
			} else {
				merchant = this.LayoutLoopResult.length % 2 == 0 ? this.LayoutLoopResult.length / 2 : parseInt(this.LayoutLoopResult.length / 2) + 1;
			}
			return merchant;
			// return 4;
		},
		groupNumber() {
			return function(item) {
				let arr = [];
				let arrSlice = this.LayoutLoopResult.slice(item * this.sliceLength, (item + 1) * this.sliceLength);
				this.arrSlice = arrSlice;
				for (let i = 0; i < arrSlice.length; i++) {
					arr.push(arrSlice[i][0].length);
				}
				let rounding = Math.round(this.sumArr(arr) / arrSlice.length);
				console.log(rounding);
				return rounding;
			};
		},
		sliceLength() {
			let arr = [];
			for (let i = 0; i < this.LayoutLoopResult.length; i++) {
				arr.push(this.LayoutLoopResult[i][0].length);
			}
			let rounding = Math.round(this.sumArr(arr) / this.LayoutLoopResult.length);
			let merchant = null;
			console.log(rounding);
			if (this.LayoutLoopResult.length <= 4 && rounding < 5) {
				merchant = 4;
			} else if (this.LayoutLoopResult.length > 4 && rounding < 5) {
				merchant = 4;
			} else if (this.LayoutLoopResult.length > 4 && rounding >= 5 && rounding < 8) {
				merchant = 3;
			} else {
				merchant = 2;
			}
			return merchant;
		},
		gridtable() {
			let seed = this.seed_site == '没有种子' ? false : true;
			if (seed) {
				let substrArr = [];
				let seed_site = this.seed_site.split('，');
				let surplus;
				for (let i = 0; i < seed_site.length; i++) {
					let obj = {};
					obj.seed_site = seed_site[i].split('-')[0];
					obj.name = seed_site[i].split('(')[0].split('-')[1];
					obj.sign = seed_site[i].split('(')[1].split(')')[0];
					obj.company = seed_site[i].split('-')[2];
					substrArr.push(obj);
				}
				substrArr.sort(this.compare('seed_site'));
				if (seed_site.length / 4 != 0 && seed_site.length > 4) {
					surplus = 8 - (seed_site.length % 4);
					for (let i = 0; i < surplus; i++) {
						let obj = {};
						obj.seed_site = '';
						obj.name = '';
						obj.sign = '';
						obj.company = '';
						substrArr.push(obj);
					}
				} else {
					surplus = 4 - (seed_site.length % 4);
					for (let i = 0; i < surplus; i++) {
						let obj = {};
						obj.seed_site = '';
						obj.name = '';
						obj.sign = '';
						obj.company = '';
						substrArr.push(obj);
					}
				}

				return substrArr;
			} else {
				let substrArr = [];
				for (let i = 0; i < 4; i++) {
					let obj = {};
					obj.seed_site = '';
					obj.name = '';
					obj.sign = '';
					obj.company = '';
					substrArr.push(obj);
				}
				return substrArr;
			}
		},
		drawTimes() {
			let unixtime = this.drawTime;
			let unixTimestamp = new Date(unixtime * 1000);
			let Y = unixTimestamp.getFullYear();
			let M = unixTimestamp.getMonth() + 1 >= 10 ? unixTimestamp.getMonth() + 1 : '0' + (unixTimestamp.getMonth() + 1);
			let D = unixTimestamp.getDate() >= 10 ? unixTimestamp.getDate() : '0' + unixTimestamp.getDate();
			let h = unixTimestamp.getHours() >= 10 ? unixTimestamp.getHours() : '0' + unixTimestamp.getHours();
			let m = unixTimestamp.getMinutes() >= 10 ? unixTimestamp.getMinutes() : '0' + unixTimestamp.getMinutes();
			let s = unixTimestamp.getSeconds() >= 10 ? unixTimestamp.getSeconds() : '0' + unixTimestamp.getSeconds();
			let toDay = Y + '-' + M + '-' + D + '  ' + h + ':' + m + ':' + s;
			return toDay;
		},
		gridtablepage() {
			let page = this.seed_site.split('，').length % 8 == 0 ? this.seed_site.split('，').length / 8 : parseInt(this.seed_site.split('，').length / 8) + 1;
			return page;
		}
	},
	methods: {
		compare(property) {
			//按对象属性值排序
			return function(a, b) {
				var value1 = a[property];
				var value2 = b[property];
				return value1 - value2;
			};
		},
		sumArr(arr) {
			//数组求和
			var sum = 0;
			for (var i = 0; i < arr.length; i++) {
				sum += arr[i];
			}
			return sum;
		},
		//计算table中间的分数
		calc_table_element(arr) {
			let newCalc = {};
			//构建数组
			for (let new_team in arr) {
				newCalc[new_team] = [];
				for (let player in arr[new_team][0]) {
					let battleArr = [];
					for (let battle in arr[new_team][0]) {
						battleArr.push([]);
					}
					newCalc[new_team].push(battleArr);
				}
			}
			let calcResult = JSON.parse(JSON.stringify(newCalc));
			//获取
			for (let team in arr) {
				for (let wheel in arr[team])
					if (wheel > 0) {
						for (let battle in arr[team][wheel]) {
							for (let player_row in arr[team][0]) {
								//选手的 matchs
								//推入winner
								if (arr[team][wheel][battle].user_sign_id == arr[team][0][player_row].sign_id) {
									//判断winner a b位置
									let winner_in_top = arr[team][wheel][battle].user_sign_id == arr[team][wheel][battle].sign_id_a ? true : false;
									//判断loser_id
									let loser_id =
										arr[team][wheel][battle].user_sign_id == arr[team][wheel][battle].sign_id_a ? arr[team][wheel][battle].sign_id_b : arr[team][wheel][battle].sign_id_a;
									for (let player_col in arr[team][0]) {
										if (loser_id == arr[team][0][player_col].sign_id) {
											if (winner_in_top) {
												let reverse_Obj = JSON.parse(JSON.stringify(arr[team][wheel][battle]));
												reverse_Obj.score = this.reverse_score(reverse_Obj.score);
												// reverse_Obj.team_score = this.reverse_team_score(winner_in_top ? reverse_Obj.team_score_b : reverse_Obj.team_score_a)
												arr[team][wheel][battle].winColor = true;
												calcResult[team][player_row][player_col] = arr[team][wheel][battle]; //winner
												calcResult[team][player_col][player_row] = reverse_Obj;
											} else {
												let reverse_Obj = JSON.parse(JSON.stringify(arr[team][wheel][battle]));
												reverse_Obj.score = this.reverse_score(reverse_Obj.score);
												// reverse_Obj.team_score = this.reverse_team_score(winner_in_top ? reverse_Obj.team_score_a : reverse_Obj.team_score_b)
												reverse_Obj.winColor = true;
												calcResult[team][player_row][player_col] = reverse_Obj; //winner
												calcResult[team][player_col][player_row] = arr[team][wheel][battle];
											}
										}
									}
								}
							}
						}
					}
			}
			return calcResult;
		},
		reverse_score(score) {
			for (let game in score) {
				let a = score[game].top;
				score[game].top = score[game].bot;
				score[game].bot = a;
			}
			return score;
		},
		//弃赛
		//下面两个方法无用
		add_table_slash(arr) {
			for (let team in arr) {
				for (let player in arr[team]) {
					let newArr = [];
					let headArr = arr[team][player].slice(0, player);
					headArr.push({
						slash: true
					});
					let botArr = arr[team][player].slice(player, arr[team][player].length);
					newArr = headArr.concat(botArr);
					arr[team][player] = newArr;
				}
			}
			return arr;
		},
		completeArr(arr) {
			//console.log('completeArr',arr)
			for (let team in arr) {
				for (let player in arr[team]) {
					if (arr[team][player].length < arr[team].length) {
						for (let i = 0; i < arr[team].length - 1; i++) {
							arr[team][player].push({});
						}
					}
				}
			}
			return arr;
		}
	}
};
</script>
<style lang="less" scoped>
.team_scoreThreeClass {
	text-align: center;
	border-top: 1px #cac4c4 solid;
}
.team_score {
	margin: 0 3px;
	display: flex;
}
.team_scoreOneClass {
	display: flex;
	width: 109px;
	flex-wrap: wrap;
}
.team_scoreFiveClass {
	font-size: 12px;
	border-top: 1px #cac4c4 solid;
}
.team_scoreFiveClass:after {
	content: '';
	height: 0;
	display: block;
	overflow: hidden;
	clear: both;
}
.team_scoreFiveClass > div {
	// width: 100px;
	display: flex;
}
.team_scoreOneClass > div {
	// width: 36px;
	width: 33.33%;
	display: flex;
}
.tableMain .exportCustomStyle .tableShadow {
	border-left: 1px solid #909399;
}
.tableMain .exportCustomStyle table tbody tr td {
	font-weight: bold;
	font-size: 18px;
	border-right: 1px solid #909399;
	border-bottom: 1px solid #909399;
}

.tableMain .exportCustomStyle table thead tr td {
	border-right: 1px solid #909399;
	border-bottom: 1px solid #909399;
}

.tableMain .exportCustomStyle table {
	border-left: 1px solid #909399;
	border-top: 1px solid #909399;
}

.spacingThree > table {
	// margin: 50px auto !important;
}
// 表格间距
.spacingFive > table {
	// margin: 50px auto !important;
}

.spacingFour > table {
	margin: 30px auto !important;
}

.spacingSix > table {
	margin: 200px auto !important;
}

.spacingen > table {
	margin: 150px auto !important;
}

.spacingTow > table {
	margin: 100px auto !important;
}
// .fourtable{
// 	margin-top: 50px;
// }

table.gridtable {
	width: 100%;
	font-family: verdana, arial, sans-serif;
	font-size: 11px;
	color: #333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

table.gridtable th {
	height: 7px;
	line-height: 7px;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}

table.gridtable td {
	line-height: 15px;
	height: 15px;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}

.red {
	color: red;
}

.tableShadow {
	background: #f8f8f8;
}

.tableMain {
	margin-top: 20px;
	padding: 0 20px;

	table {
		margin: auto;
		margin-top: 10px;
		margin-bottom: 20px;
		text-align: center;
		border-collapse: collapse;
		border-left: 1px solid #eaeaea;
		border-top: 1px solid #eaeaea;

		thead {
			tr {
				height: 30px;
				background-color: rgba(66, 185, 131, 0.1);

				td {
					width: 70px;
					border-right: 1px solid #eaeaea;
					border-bottom: 1px solid #eaeaea;
				}

				td:first-child {
					width: 150px;
				}
			}

			tr:last-child {
				td {
					width: 50px;
				}
			}
		}

		tbody {
			tr {
				height: 60px;

				td {
					border-right: 1px solid #eaeaea;
					border-bottom: 1px solid #eaeaea;
					width: 70px;
					min-width: 70px;
					height: 60px;
					font-size: 15px;

					td:first-child {
						width: 150px;
						min-width: 150px;
					}

					.biaotou {
						/*border-top:1px solid #eaeaea;*/
						/*transform: rotate(25deg);*/
						/*width: 108%;*/
						width: 49px;
						background: linear-gradient(to top right, #fff 49.2%, #dbdbdb, #fff 50.8%);
						/*background: linear-gradient(to top right, #fff 24px, #dbdbdb, #fff 26px);*/
						/*background: linear-gradient(to top right, #fff calc(50% - 1px), #dbdbdb, #fff calc(50% + 1px) );*/
						height: 59px;
					}

					.box-c {
						// width: 70px;
						width: 100%;
						height: 60px;
					}

					.diagnal-line {
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
}
</style>
